// toastr.info('提示信息');                // 普通提示
// toastr.success('提示信息');             // 成功提示
// toastr.warning('提示信息');             // 警告提示
// toastr.error('提示信息');               // 错误提示

// 需求1: 点击a链接，让注册和登录盒子显示隐藏;
let a1 = document.querySelector('.register a');
let a2 = document.querySelector('.login a');
let register = document.querySelector(".register");
let login = document.querySelector(".login");
// 绑定事件，显示隐藏
a2.onclick = function () {
    // 登录里面的a链接被点击，登录隐藏，注册显示
    login.style.display = 'none';
    register.style.display = 'block';
}
a1.onclick = function () {
    // 注册里面的a链接被点击，登录显示，注册隐藏
    login.style.display = 'block';
    register.style.display = 'none';
}

// 需求2: 校验input
let inp1 = document.querySelector('.register [name="username"]');
let inp2 = document.querySelector('.register [name="password"]');
let inp3 = document.querySelector('.login [name="username"]');
let inp4 = document.querySelector('.login [name="password"]');
// 封装校验input的函数
function verifyInput(ele, txt1, reg, txt2) {
    // 绑定事件 - input
    ele.addEventListener('input', function () {
        // 1.非空校验
        if (this.value == "") {
            // 让后面的span显示，并且设置内容;
            this.nextElementSibling.style.display = 'block';
            this.nextElementSibling.innerHTML = txt1;
            return; // 如果输入内容为空，下面的校验就不用执行了
        } else {
            // 让后面的span隐藏，并且设置内容为空字符串;
            this.nextElementSibling.style.display = 'none';
            this.nextElementSibling.innerHTML = '';
            // 不能写return，还要后面进行校验;
        }
        // 2.长度校验 - 正则表达式好一些;   \S 代表非空白
        //    \S就是只要不放入空白，就能够通过正则校验
        if (reg.test(this.value)) {
            // 通过校验 - 让后面的span隐藏，并且设置内容为空字符串;
            this.nextElementSibling.style.display = 'none';
            this.nextElementSibling.innerHTML = '';
        } else {
            // 不通过校验 - 让后面的span显示，并且设置内容;
            this.nextElementSibling.style.display = 'block';
            this.nextElementSibling.innerHTML = txt2;
        }
    })
}
// 调用
verifyInput(inp1, '用户名不能为空', /^\S{2,15}$/, '用户名长度为2到15位');
verifyInput(inp2, '密码不能为空', /^\S{6,15}$/, '密码长度为6到15位');
verifyInput(inp3, '用户名不能为空', /^\S{2,15}$/, '用户名长度为2到15位');
verifyInput(inp4, '密码不能为空', /^\S{6,15}$/, '密码长度为6到15位');

// 需求3: 注册功能;
const form1 = document.querySelector('.register form');
// 绑定事件
form1.addEventListener('submit', function (e) {
    // 阻止默认提交
    e.preventDefault();
    // 发送ajax
    axios({
        method: 'POST',
        url: '/api/register',
        // 查询参数用params，请求体参数data
        data: {
            username: inp1.value,
            password: inp2.value
        }
    }).then(({ data: res }) => {
        // console.log(res);
        // // 判断业务状态码 - 失败
        // if (res.code == 1) {
        //     // 警告注册失败
        //     toastr.warning(res.message);
        // }
        // 成功
        if (res.code == 0) {
            // 成功提示
            toastr.success('恭喜您，注册成功！');
            // inp3.value = inp1.value;
            // inp4.value = inp2.value;
            // 重置form表单
            form1.reset();
            // 切换到登录模块
            a1.click();
        }
    });
});

// 需求4: 登录功能;
const form2 = document.querySelector('.login form');
form2.addEventListener('submit', function (e) {
    e.preventDefault();
    axios({
        method: 'POST',
        url: '/api/login',
        // 查询参数用params，请求体参数data
        data: {
            username: inp3.value,
            password: inp4.value
        }        
    }).then(({ data: res }) => {
        // // 判断业务状态码
        // if (res.code == 1) {
        //     toastr.warning(res.message);
        // }
        if (res.code == 0) {
            // 成功提示
            toastr.success('恭喜您，登录成功！');
            // 跳转到index.html页面
            location.href = './index.html'
            // token保存到本地
            localStorage.setItem('token', res.token)
        }
    });
});

